<template>
  <div :class="['workspace', { light: mode == 'light' }]">
    <Toolbar :containerConfig="containerConfig" />
    <Container>
      <template #comp>
        <Comp />
      </template>
      <template #panel>
        <Panel @compActiveChange="compActiveChange" @containerConfig="getContainerConfig" />
      </template>
      <template #config>
        <Config :curComp="curComp" :containerConfig="containerConfig" />
      </template>
    </Container>
  </div>
</template>
<script setup lang="ts">
import { Toolbar, Container, Comp, Panel, Config } from './layout'
import useCommonStore from '@/store/common'
import { computed, ref } from 'vue'
import { containerDefault, compDefault } from './defaults'

const commonStore = useCommonStore()

const mode = computed(() => commonStore.mode)
// 当前激活的组件
let curComp = ref<TComp>(compDefault)
// 容器配置
let containerConfig = ref<TContainer>(containerDefault)

const compActiveChange = (comp: TComp) => {
  curComp.value = comp
}

const getContainerConfig = (config: TContainer) => {
  containerConfig.value = config
}
</script>